<template>
  <a-card
    :bordered="false"
  >
    <template slot="title">
      <slot name="title"></slot>
    </template>
    <!-- slot默认值 -->
    <div style="height:400px" v-show="hasEcart">
      <loadingState :echartShowStatus="echartShowStatus" >
        <div
          :id="echartid"
          style="height:100%"
        ></div>
      </loadingState>
    </div>
    <div class="table-page-search-wrapper commonSelectWidth">
      <a-form>
        <a-row :gutter="48">
          <slot name="search"></slot>
        </a-row>
      </a-form>
    </div>
    <div class="commonTableSty">
      <a-button
        style="margin:10px 0;"
        v-if="$hasPermission(hasPermission)"
        type="primary"
        @click="halderDown"
      >{{ $t('outputList') }}</a-button>
      <has-no-permission-tip v-else>
        <a-button
          style="margin:10px 0;"
          disabled
        >{{ $t('outputList') }}</a-button>
      </has-no-permission-tip>
      <a-table
        :rowKey="(record, index) => index"
        :dataSource="data"
        :pagination="pagination"
        :loading="loading"
      >
        <a-table-column title="#">
          <template slot-scope="text, record,index">
            {{ (pagination.current-1)*pagination.pageSize+index + 1 }}
          </template>
        </a-table-column>
        <a-table-column v-for="(item,index) in columns" :key="index" :title="item.title" :data-index="item.dataIndex">
          <template slot-scope="text, record">
            <template v-if="item.scopedSlots">
              <slot :name="item.scopedSlots.customRender" :text="text" :record="record" ></slot>
            </template>
            <template v-else >{{ text }}</template>
          </template>
        </a-table-column>
      </a-table>
    </div>
  </a-card>
</template>

<script>
import loadingState from '@/components/SelfComponents/LoadingState'
import HasNoPermissionTip from '@/components/HasNoPermissionTip'
import { mapGetters } from 'vuex'
export default {
  name: 'EchartTable',
  components: {
    HasNoPermissionTip,
    loadingState
  },
  props: {
    echartid: {
      type: String,
      default: 'echartwarp'
    },
    // hasEcart
    hasEcart: {
      type: Boolean,
      default: true
    },
    //   echart图状态
    echartShowStatus: {
      type: Number,
      default: 1
    },
    // 表格数据
    data: {
      type: Array,
      required: true
    },
    // 表格加载数据状态
    loading: {
      type: Boolean,
      required: true
    },
    // 表格列
    columns: {
      type: Array,
      required: true
    },
    hasPermission: {
      type: Array,
      required: true
    }
    // total: {
    //   type: Number,
    //   default: 0
    // },
    // current: {
    //   type: Number,
    //   default: 1
    // },
    // pageSize: {
    //   type: Number,
    //   default: 10
    // }

  },
  computed: {
    ...mapGetters(['locale'])
  },
  data () {
    return {
      // 查询参数
      echartDom: null,
      pagination: {}
    }
  },
  created () {
    const vm = this
    // 分页初始化
    this.pagination = {
      current: 1,
      pageSize: 10,
      total: 0,
      pageSizeOptions: ['10', '20', '50', '100'],
      showSizeChanger: true,
      onChange: (page) => {
        vm.pagination.current = page
        this.$emit('getData')
      },
      onShowSizeChange: (current, pageSize) => {
        vm.pagination.current = current
        vm.pagination.pageSize = pageSize
        this.$emit('getData')
      }
    }
  },
  mounted () {
    const vm = this
    vm.echartDom = vm.$echarts.init(document.getElementById(vm.echartid))
    window.onresize = function temp () {
      vm.echartDom.resize()
    }
  },
  methods: {
    // 导出表格
    halderDown () {
      this.$emit('halderDown')
    }
  },
  watch: {
    locale () {
      this.$emit('getData')
    }
  }
}
</script>
